<template>
    <div class="time-change-page">
        <!-- 标题部分 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <!-- 输入区域 -->
        <div class="content-box">
            <div class="input-group">
                <div class="input-item">
                    <span>选择单位：</span>
                    <el-select v-model="selectedUnit" placeholder="请选择单位" style="width: 100%;">
                        <el-option
                                v-for="unit in units"
                                :key="unit.value"
                                :label="unit.label"
                                :value="unit.value"
                        />
                    </el-select>
                </div>
                <div class="input-item">
                    <span>输入数值：</span>
                    <el-input-number
                            v-model="inputValue"
                            :min="0"
                            :step="1"
                            style="width: 100%;"
                    />
                </div>
            </div>

            <!-- 结果表格 -->
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    style="width: 100%;"
            >
                <el-table-column
                        prop="label"
                        label="单位"
                        width="160"
                        :header-cell-style="{ backgroundColor: '#f0f0f0' }"
                        :cell-style="{ backgroundColor: '#f9f9f9', fontWeight: 'bold' }"
                />
                <el-table-column
                        prop="value"
                        label="数值"
                >
                    <template #default="{ row }">
                        <el-input v-model="row.value" readonly style="width: 100%;"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 工具信息
const title = ref('')
const subtitle = ref('')

// 单位定义
const units = [
    {label: '纳秒 (ns)', value: 'ns'},
    {label: '微秒 (μs)', value: 'μs'},
    {label: '毫秒 (ms)', value: 'ms'},
    {label: '秒 (s)', value: 's'},
    {label: '分钟 (min)', value: 'min'},
    {label: '小时 (h)', value: 'h'},
    {label: '天 (d)', value: 'd'},
    {label: '周 (week)', value: 'week'},
    {label: '月 (month)', value: 'month'},
    {label: '年 (year)', value: 'year'}
]

// 默认值
const selectedUnit = ref('s')
const inputValue = ref(55)

// 表格数据（当前全部使用输入值）
const tableData = ref(
    units.map(unit => ({
        label: unit.label,
        value: ''
    }))
)

// 获取工具说明
const loadToolInfo = () => {
    get('/api/mathTool/getInfo?path=time_change',
        (data) => {
            title.value = data.title || '时间换算'
            subtitle.value = data.introduction || ''
        },
        (err) => ElMessage.error('获取工具信息失败：' + err)
    )
}

// 防抖请求函数，避免频繁请求
const fetchTimeChangeResult = debounce(() => {
    if (!selectedUnit.value || inputValue.value == null) return

    post('/api/mathTool/getTimeChangeResult', {
        type: selectedUnit.value,
        text: inputValue.value.toString()
    }, (res) => {
        tableData.value = res
    }, (err) => {
        ElMessage.error('换算失败：' + err)
    })
}, 500)

// 监听单位和输入数值变化，调用接口
watch([selectedUnit, inputValue], fetchTimeChangeResult, {immediate: true})

onMounted(() => {
    loadToolInfo()
    fetchTimeChangeResult()
})
</script>

<style scoped>
.time-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-item span {
    font-weight: 500;
    margin-bottom: 0.4rem;
}
</style>